13712
11323 
Je suis un débutant absolu, j'étudie moi-même depuis deux semaines en vue d'un bootcamp à venir dans un mois. Dans un effort pour améliorer mes compétences et «apprendre à penser comme un développeur», j'ai entrepris un projet qui tente de résoudre un problème réel.
Ma femme dirige une entreprise qui l'oblige à générer des factures pour ses clients. J'essaie d'utiliser HTML et JavaScript pour créer une application Web qui lui permet de créer rapidement des factures personnalisées au lieu de les écrire manuellement à chaque fois.
Dans la version actuelle, une invite lui demande un numéro. Ce nombre génère un nombre égal de lignes à trois colonnes en HTML. Cela lui permet de personnaliser la facture avec le nombre exact de champs dont elle a besoin.
La colonne 1 contient le nom du produit. Dans la même ligne, la colonne 2 contient le nombre d'unités, tandis que la colonne 3 contient le coût total de ce produit, qui est le prix de base multiplié par le nombre d'unités. Je veux que ce calcul se produise en cliquant sur un bouton. Mais je suis coincé.
Afin d'effectuer les calculs, je dois être en mesure d'obtenir les nombres entiers de chaque ligne et colonne et de les passer dans une fonction. Mais comme chaque ligne et colonne a été générée automatiquement, elles n'ont pas d'attributs uniques et ne peuvent donc pas être identifiées. Je suis capable d'effectuer les calculs dans chaque colonne, mais pas dans chaque ligne.
Comme je suis si nouveau, n'ayant appris que de quelques cours d'introduction à la Codecademy et de certaines vidéos YouTube, je ne sais pas comment évaluer si j'aborde le projet complètement mal, ou s'il me manque une astuce, ou s'il y a juste quelque chose qui n'a pas encore appris. Si quelqu'un avec une certaine expertise pouvait me pousser dans la bonne direction, je l'apprécierais vraiment!
J'ai joint tout le code à ce message. Toutes mes excuses si c'est un horrible bordel. Allez-y doucement, je suis un débutant!
const invDate = Date ();
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
let billicedName = prompt ('À qui cette facture est-elle établie?', 'Entrez un nom');
let productFields = Number (prompt ('Combien de noms de produits sur cette facture?', 'Veuillez saisir un nombre'));
laissez les champs = ''
laissez dynHtml = ''
if (BillicedName! = null && productFields! = null) {
pour (soit i = 1; i <= productFields; i ++) {
champs + = champ};
} else {alert ('Veuillez saisir des entrées valides.');
};
dynHtml = "
  
 
" +
"
 FACTURE 
" +
"
 Préparé pour: " + billicedName + ", le" +
"
" + invDate + "
 
 
" +
champs + "
 
" +
" 
";
document.write (dynHtml);
document.getElementById ('calculer'). onclick = function getQtyFields () {
laissez qtyInputs = document.getElementsByName ('qty'),
resultQty = 0;
pour (soit j = 0; j
2020-12-15 08:12:04 
Comme vous l'avez dit, votre principal problème est de trouver un moyen de donner à chaque champ de saisie dans sa propre ligne son propre identifiant unique. De cette façon, vous pouvez calculer le prix de chaque ligne et l'insérer dans le champ de prix.
Vous devez d'abord commencer par les champs:
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
...
pour (soit i = 1; i <= productFields; i ++) {
champs + = champ};
...
};
Chaque groupe a besoin de son propre identifiant. De cette façon, vous pouvez ultérieurement vous référer à chaque entrée de chaque ligne pour calculer le prix total du sous-total. L'attribut class est quelque chose que vous pouvez attribuer à plusieurs éléments pour y faire référence ultérieurement. Cette classe peut être n'importe quoi tant qu'elle n'est pas en conflit avec la classe d'une autre ligne. Vous pouvez utiliser le i de la boucle comme identifiant, car il change à chaque boucle.
pour (soit i = 1; i <= productFields; i ++) {
var field = " " +
" " +
"  
 
";
champs + = champ
};
Cela ajoutera la classe row- {i} à chaque champ de chaque ligne. Mieux encore, vous pouvez refactoriser cela dans sa propre fonction
function generateFields (i) {
return " " +
" " +
"  
 
";
}
pour (soit i = 1; i <= productFields; i ++) {
champs + = generateFields (i);
};
Vous obtenez quelque chose de similaire au html suivant
 
 
  
 

 
 
  
 

 
 
  
 

Maintenant, dans votre fonction de calcul, vous pouvez vous référer à ces lignes et calculer leur prix. Ici, vous pouvez parcourir les champs de saisie «élément».
document.getElementById ('calculer'). onclick = function getQtyFields () {
laissez itemInputs = document.getElementsByName ('élément')
pour (soit i = 0; i )
pour (soit i = 0; i